<script setup>
import { letterSubmitBugService } from '@/api/letter'
import { useUserStore } from '@/stores'
import { ZlMessage } from '@/utils/message'
import { ChatDotRound } from '@element-plus/icons-vue'
import { ref } from 'vue'
const centerDialogVisible = ref(false)
const input = ref('')
const userStore = useUserStore()

const onPush = async () => {
  if (input.value == '' || input.value.length <= 6) {
    ZlMessage.warning('请把问题描述的更详细一点哦!')
    return
  }
  // 拿到仓库的内容
  const userId = userStore.userInfo.userId
  const username = userStore.userInfo.username
  const content = input.value
  const pushLocation = window.location.href
  const letter = {
    userId,
    username,
    content,
    pushLocation
  }
  const res = await letterSubmitBugService(letter)
  if (res.data.code != 201) {
    ZlMessage.success(res.data.msg)
  }
  centerDialogVisible.value = false
  input.value = ''
}
</script>
<template>
  <el-dialog
    v-model="centerDialogVisible"
    :lock-scroll="false"
    title="问题反馈"
    width="500"
    align-center
  >
    <span>请输入您要反馈的问题: </span>
    <null-box size="10"></null-box>
    <el-input v-model="input" ref="myInput"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onPush()"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>

  <div style="position: fixed; right: 20px; bottom: 20px; z-index: 10">
    <a-popover position="lb">
      <el-button
        type="primary"
        size="large"
        :icon="ChatDotRound"
        circle
        @click="centerDialogVisible = true"
      />
      <template #content>
        <p>问题反馈</p>
      </template>
    </a-popover>
  </div>
  <router-view></router-view>
</template>
<style>
/* html {
  background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
} */
</style>
